<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>点击订单管理进入页面</title>
<!--    <link rel="Stylesheet" href="../css/jpetstore.css" type="text/css" media="screen"/>-->
    <script th:src="@{../js/jquery-3.5.1.min.js}"></script>
</head>
<style>
    *{
        padding: 0px;
        margin: 0px;
    }
    #Content {
        width: 100%;
        height: 95ex;
        color: #333;
        background-color: rgba(256,256,256,0.5);
        border-width: 0;
        position: relative;
        overflow: hidden;
    }
    #Catalog{
        display: block;
        margin-top: 3%;
        margin-left: 30%;
        width: 80ex;
        height: 80ex;
        font-size: 2ex;
        background-color:rgba(256,256,256,0);
        margin-bottom: 10ex;
    }
    .a-managemain, .a:link, .a:visited {
        background-color: #005e21;
        text-decoration: none;
        font-family: helvetica, tahoma, arial, verdana, sans-serif;
        font-size: 1.5ex;

    }
    .a-managemain{
        display: inline-block;
        float: left;
        height: 30ex;
        width: 30ex;
        border-color: #56832c;
        border-width: 1ex;
        border-style: solid;
        position: absolute;

    }
    .a-managemain:hover{
        background-size: 30%;
        background-image: url("../image/09-Hornbill.png");
        background-repeat: no-repeat;
        background-position-x: right;
        background-position-y: bottom;

    }
    .Returnto{
        display: inline-block;
        float: left;
        position: absolute;
        top: 0ex;
        left: 2ex;
        height: 5ex;
        width: 50ex;
        background-image: url("../image/ReturntoManagementMainMenu.png");
        background-size: 100%;
        background-repeat: no-repeat;
        border-color: #eaac00;
        border-width: 0.4ex;
        border-style: solid;
    }

    .list{
        width: 57ex;
        height: auto;
        float: left;
        position: relative;
        top: 30ex;
        left: 1ex;
        background-color: #ffffff;
        border-color: #56832c;
        border-width: 1ex;
        border-style: solid;
        overflow: hidden;
    }
    .list input{
        display: inline-block;
        border-width: 0.3ex .3ex .3ex .3ex;
        border-style: solid;
        border-color: #eaac00;
        background-color: #ffffff;
        height: 3ex;
        font-size: 2ex;
    }
    h3{
        height: 6ex;
        width: 10ex;
    }
    a{
        display: block;
        text-decoration: none;
        color: #eaac00;
        font-weight: bold;
    }
    h2{
        display: block;
        top: 30px;
        margin-top: 2ex;
        margin-left: 12ex;
    }
    table{
        display: block;
        font-size: 3ex;
        margin-top: 1ex;
        margin-left: 3ex;
        text-align: left;
    }
    table td{
        width: 10ex;
    }
</style>
<body>
<div th:replace="manageCommon/managetop"></div>
<div id="Content">
    <a class="Returnto" href="/manage/main"></a>
    <div id="Catalog">
            <a class="a-managemain" th:href="@{'/manage/ordermanagement'}" style="background-color:#fff;top: 12ex;left: 50ex" th:onclick="operateAlert()" ><img style="width:50%;margin-left: 8.5ex;margin-top: 4ex" src="../image/order-jurassic.png"/>
                <img style="width: 60%;margin-left: 6ex;margin-top: 4ex" src="../image/orderjura.png">
            </a><br />
            <a class="a-managemain" th:href="@{'/manage/ordermanagement'}" href="" style="background-color:#fff;top: 12ex;left: 100ex"><img style="width:50%;margin-left: 9ex;margin-top: 4ex" src="../image/order-search.png"/>
                <img style="width: 60%;margin-left: 6ex;margin-top: 2ex" src="../image/ordersearch.png"></a><br />
            <a class="a-managemain"th:href="@{'/manage/analyseOrders'}"  style="background-color:#fff;top: 12ex;left: 150ex"><img style="width:55%;margin-left: 8.5ex;margin-top: 3.5ex" src="../image/order-garph.png"/>
                <img style="width: 60%;margin-left: 6ex;margin-top: 0ex" src="../image/ordergraph.png"></a>
<div class="list" >
        <div id="search">
            <h3 style="display: inline-block;height: 3.5ex">条件查询：</h3><br/>
            <h3 style="display: inline-block">User ID：</h3><input id="userIdSelect" list="usersId" name="userIdSelect"/>
                     <datalist id="usersId">
                         <option th:each="orderId:${session.usersList}" th:text="${orderId}" th:value="${orderId}"></option>
                     </datalist>
            <input type="button" style="background-repeat: no-repeat;background-image: url(../image/order-searchicon.png);background-size: 100%;height: 3ex;width: 10ex;position: absolute;top: 4ex;left: 37ex;float: left" id="searchOrder" />
                     <br/>
            <h3 style="display: inline-block">Order Date：</h3><input id="dateList" list="dateSelect" name="dateSelect"/>
                       <datalist id="dateSelect">
                           <option th:each="date:${session.orderDateList}" th:text="${date}" th:value="${date}"></option>
                       </datalist>
            <a th:href="@{'/manage/ordermanagement'} " style="position: absolute;top: 14ex;left: 39ex;float: left">查询全部订单</a>



        <script>
            $(function (){
                $('#searchOrder').on('click',function () {
                    var userid=document.getElementById("userIdSelect").value;
                    var date = document.getElementById("dateList").value;
                    let datas = {"Id":"56"}
                    if((userid===null||userid.length===0)&&(date===null||date.length===0)){
                        window.alert("请至少输入一项条件");
                    }else{
                        console.log("格式正确");
                        $.post('/manage/searchOrder?userIdSelect='+userid+'&dateSelect='+date,datas,function (data) {
                            switch (data.code){
                                case 0:window.alert("无该用户的订单");break;
                                case 1:location.href="/manage/viewSelectOrder";break;
                                case 2:window.alert("当天无订单");break;
                                case 3:location.href="/manage/viewSelectOrder";break;
                                case 4:window.alert("该用户该天无订单");break;
                                case 5:location.href="/manage/viewSelectOrder";break;
                                default:
                                    window.alert("查询失败");break;
                            }
                        });
                    }
                });
            });
        </script>
            <script>
                function operateAlert(){
                    alert("请选择一个订单后进行操作！");
                }
            </script>
        <!--        表单：userId 基本信息 安全信息-->
        <h2>Order List</h2>
        <table>
            <tr>
                <th>Order ID</th>
                <th>User ID</th>
                <th>Order Data</th>
            </tr>
            <tr th:each="orderId:${session.orderIdList}">
                <td>
                    <a th:href="'/manage/orderBasicInfo?orderId='+${orderId.orderId}" th:text="${orderId.orderId}"></a>
                </td>
                <td th:text="${orderId.username}">
                    UserId
                </td>
                <td th:text="${orderId.orderDate}">
                    OrderData
                </td>
            </tr>
        </table>
    </div>
</div>
</div>
</div>
<div th:replace="manageCommon/managebottom"></div>
</body>
</html>
